<template>
	<view class="biased-students-card">
		<view class="card-header">
			<text class="card-title">偏科名单</text>
			<view class="info-icon">ⓘ</view>
		</view>
		
		<view class="students-list">
			<view class="student-item" v-for="student in biasedStudentsData" :key="student.id">
				<view class="student-avatar">
					<text class="avatar-text">{{ student.avatar }}</text>
				</view>
				<view class="student-info">
					<text class="student-name">{{ student.name }}</text>
					<view class="subject-scores">
						<text class="score-item" v-for="score in student.scores" :key="score.subject">
							{{ score.subject }} <text class="score-value" :class="score.type">{{ score.value }}</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'BiasedStudents',
	props: {
		biasedStudentsData: {
			type: Array,
			default: () => [
				{
					id: 1,
					name: '孙悟空',
					avatar: '孙',
					scores: [
						{ subject: '语文', value: '46.7', type: 'low' },
						{ subject: '数学', value: '146.7', type: 'high' },
						{ subject: '政治', value: '46.7', type: 'low' }
					]
				},
				{
					id: 2,
					name: '孙悟空',
					avatar: '孙',
					scores: [
						{ subject: '语文', value: '46.7', type: 'low' },
						{ subject: '数学', value: '146.7', type: 'high' },
						{ subject: '政治', value: '46.7', type: 'low' }
					]
				},
				{
					id: 3,
					name: '孙悟空',
					avatar: '孙',
					scores: [
						{ subject: '语文', value: '46.7', type: 'low' },
						{ subject: '数学', value: '146.7', type: 'high' },
						{ subject: '政治', value: '46.7', type: 'low' }
					]
				}
			]
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@white: #fff;
@border-color: #f0f0f0;

.biased-students-card {
	background: @white;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.card-title {
			font-size: 28rpx;
			font-weight: bold;
			color: @text-color;
		}

		.info-icon {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			background: #e0e0e0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: @text-light;
		}
	}

	.students-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.student-item {
			display: flex;
			align-items: center;
			gap: 16rpx;
			padding: 16rpx;
			background: #f8f9fa;
			border-radius: 12rpx;

			.student-avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: @primary-color;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;

				.avatar-text {
					font-size: 24rpx;
					color: @white;
					font-weight: bold;
				}
			}

			.student-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 8rpx;

				.student-name {
					font-size: 26rpx;
					color: @text-color;
					font-weight: 500;
				}

				.subject-scores {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;

					.score-item {
						font-size: 22rpx;
						color: @text-light;

						.score-value {
							font-weight: bold;
							margin-left: 4rpx;

							&.high {
								color: #4CAF50;
							}

							&.low {
								color: #F44336;
							}
						}
					}
				}
			}
		}
	}
}
</style>
